{include file="common/_meta" /}
<title>新增文章 - 资讯管理 </title>
<meta name="keywords" content="李志立，lizhilimaster@163.com">
<meta name="description" content="李志立，lizhilimaster@163.com">
</head>
<body>
	<article class="page-container" style="padding-left: 100px !important;">
		<form class="form form-horizontal" enctype="multipart/form-data" action="" method="post" id="form-article-add">
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2"><span class="c-red">*</span>文章标题：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="请输入文章标题" id="title" name="title">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2"><span class="c-red">*</span>分类栏目：</label>
				<div class="formControls col-xs-9 col-sm-9"> <span class="select-box">
						<select name="cateid" id="cate" class="select">
							<option value>全部栏目</option>
							{volist name="datasort" id="vo"}
							<option value="{$vo.id}">
								<?php if(isset($vo['level'])){echo str_repeat("|--",$vo['level']);}?>{$vo.catename}</option>
							{/volist}
						</select>
					</span> </div>
			</div>
			

			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2">发布地区：</label>
				<div class="formControls col-xs-3 col-sm-3">
					<span class="select-box">
						<select name="sheng" id="sheng" class="select">
							<option value>请选择省</option>
							{volist name="sheng" id="vo"}
							<option value="{$vo.id}">{$vo.label}</option>
							{/volist}
						</select>
					</span>
				</div>
				<div class="formControls col-xs-3 col-sm-3">
					<span class="select-box">
						<select name="shi" id="shi"  class="select">
							<option value>请选择市</option>
						</select>
					</span>
				</div>
				<div class="formControls col-xs-3 col-sm-3">
					<span class="select-box">
						<select name="xian" id="xian" class="select">
							<option value>请选择县</option>
						</select>
					</span>
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2">是否远程跳转：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="远程跳转地址,必须http://开头" id="url" name="url">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2">关键词：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="请输入关键词" id="keyword" name="keyword">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2">设置时间：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<input type="datetime-local" value=""  name="create_time" placeholder="默认不填写,为真实时间" class="input-text">
				</div>
			</div>
			<div class="row cl wenzhang">
				<label class="form-label col-xs-3 col-sm-2">文章摘要：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<textarea name="desc" cols="" rows="" id="desc" class="textarea" placeholder="说点什么..."  onKeyUp="textlength()"></textarea>
					<p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2">展示数据：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<input type="number" class="input-text" value="<?php echo mt_rand(500,2000); ?>" placeholder=""  name="click_wai" style="width: 30%;"> 随机生成500-2000 之间的数字
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2">文章来源：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<input type="text" class="input-text" value="" placeholder=""  name="laiyuan">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2">文章作者：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<input type="text" class="input-text" value="" placeholder=""  name="author">
				</div>
			</div>
			
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2">设为推荐：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<div class="switch" data-on-label="开" data-off-label="关">
						<input type="checkbox" name="is_tui" />
					</div>
				</div>
			</div>
			<div class="row cl wenzhang">
				<label class="form-label col-xs-3 col-sm-2">缩略图：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<div class="uploader-thum-container">
						<a href="javascript:void();" class="btn btn-primary radius"><i class="icon Hui-iconfont">&#xe642;</i> 浏览文件</a>
						<input type="file" class="input-file" onchange='onpic()' name="pic" id="pic" value="" accept='image/*' style="font-size: 20px;left:0;" /><span
						 id="sp"></span>
					</div>
				</div>
			</div>
			<div class="row cl tupian"  style="display: none; background-color: #f2f2f2;padding: 5px 0;">
				<label class="form-label col-xs-3 col-sm-2"><span class="c-red">*</span><a class="dtbtn" onclick="adddtrow(this)">【+】</a>上传图片：</label>
				<div class="formControls col-xs-9 col-sm-9">
					
					<div class="uploader-thum-container">
						<a href="javascript:void();" class="btn btn-primary radius"><i class="icon Hui-iconfont">&#xe642;</i> 浏览文件</a>
						<input type="file" class="input-file" onchange='onpic1(this)' name="img_pic[]"  value="" accept='image/*' style="font-size: 20px;left:0;" /><span
						 class="sp1"></span>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2">自动缩略图：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<div class="skin-minimal">
						<div class="check-box">
							<input name="ti" checked="checked" type="checkbox" id="checkbox-122">
							<label for="checkbox-122">自动提取内容第一张图片为缩率图</label>
						</div>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-3 col-sm-2"><span class="c-red">*</span>文章内容：</label>
				<div class="formControls col-xs-9 col-sm-9">
					<script id="editor" name='text' type="text/plain" style="width:100%;height:400px;"></script>
				</div>
			</div>
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
					<button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i>&nbsp;&nbsp;提交</button>
				</div>
			</div>
		</form>
	</article>
	{include file="common/_footer" /}
	<style type="text/css">
		.li123 {
			line-height: 30px;
			background: burlywood;
			display: inline-block;
			vertical-align: middle;
			padding: 0 8px;
		}
		#abtn,.dtbtn{
			color: red;
		}
	</style>
	<script type="text/javascript" src="__MANAGE__lib/jquery.validation/1.14.0/jquery.validate.js"></script>
	<script type="text/javascript" src="__MANAGE__lib/jquery.validation/1.14.0/validate-methods.js"></script>
	<script type="text/javascript" src="__MANAGE__lib/jquery.validation/1.14.0/messages_zh.js"></script>
	<script type="text/javascript" src="__MANAGE__lib/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="__MANAGE__lib/ueditor/ueditor.all.js"> </script>
	<script type="text/javascript" src="__MANAGE__lib/ueditor/lang/zh-cn/zh-cn.js"></script>
	<script type="text/javascript">
		$(function() {
			$('.skin-minimal input').iCheck({
				checkboxClass: 'icheckbox-blue',
				radioClass: 'iradio-blue',
				increaseArea: '20%'
			});
			let wo=$("#form-article-add").validate({
				rules: {
					title: {
						required: true,
					},
					cateid: {
						required: true,
					},
					text: {
						required: true,
					},
					url:{
						url:true
					}
				},
				submitHandler:function(form) {
					$("input[type=\"submit\"]").addClass('disabled').attr("disabled",true);
					var index = layer.load(1, {
						shade: [0.1,'#fff'] //0.1透明度的白色背景
					});
					setTimeout(()=>{
						$("input[type=\"submit\"]").removeClass('disabled').attr("disabled",false);
						layer.close(index);
					},1000)
					form.submit();
				}
			});
			var ue = UE.getEditor('editor');
			//获取默认栏目值
			if(!!$('#cate').val()){
			   $.post(
				"{:url('article/ajax')}",
			   {
				id:$('#cate').val(),
				type:'cate_article',
			   },
			   function(result){
				if(result.code==1){
					$('.tupian').hide();
					$('.wenzhang').show();
				}else if(result.code==3){
					console.log(888888888888)
					$('.tupian').show();
					$('.wenzhang').hide();
				}
				  
			   });	
			}
		});
		$("#sheng").change(function () {
			$.post(
				"{:url('article/ajax')}",
				{
					id:$(this).val(),
					type:'diqu_change_shi',
				},
				function(result){
					if(result.code==1){
						if(result.data){
							let html='<option value>请选择市</option>';
							for(let v of result.data){
								html+='<option value="'+v.id+'">'+v.label+'</option>'
							}
							$('#shi').html(html)
						}

						$('#xian').html('<option value>请选择县</option>')

					}
				});
		})
		$("#shi").change(function () {
			$.post(
				"{:url('article/ajax')}",
				{
					id:$(this).val(),
					type:'diqu_change_xian',
				},
				function(result){
					if(result.code==1){
						if(result.data){
							let html='<option value>请选择县</option>';
							for(let v of result.data){
								html+='<option value="'+v.id+'">'+v.label+'</option>'
							}
							$('#xian').html(html)
						}
					}
				});
		})


		$("#cate").change(function () {
		   if(!!$(this).val()){
			   $.post(
			   	"{:url('article/ajax')}",
			   {
			   	id:$(this).val(),
			   	type:'cate_article',
			   },
			   function(result){
			   	if(result.code==1){
					$('.tupian').hide();
					$('.wenzhang').show();
				}else if(result.code==3){
					$('.tupian').show();
					$('.wenzhang').hide();
				}
			      
			   });	
		   }
		})
		function adddtrow(o){
		    var div=$(o).parent().parent();
		    if($(o).html() == '【+】'){
		        var newdiv=div.clone();    
		        newdiv.find('.dtbtn').html('【-】');
				newdiv.find('input').val('');
				newdiv.find('.sp1').html('');
		        div.before(newdiv);
		    }else{
		        div.remove();
		    }
		}
		function textlength() {
			var nmb = $('#desc').val().length;
			$('.textarea-length').text(nmb);
			if(nmb>200){
				$('#desc').css("background-color","orangered");
				$('#desc').val($('#desc').val().substr(0,200));
				$('.textarea-length').text(200);
			}else{
				$('#desc').css("background-color","white");
				$('.textarea-length').text(nmb);
			}
		}
		function onpic() {
			var file = document.getElementById("pic").files[0];
			document.getElementById("sp").innerHTML = '您已经选择图片：' + file['name'];
			document.getElementById("sp").className = 'li123';
		}
		function onpic1(e) {
			$(e).parent().find('.sp1').html(e.files[0].name).addClass('li123');
		}
	</script>
</body>
</html>
